<template>
	<view>
		<MyTopNav></MyTopNav>

		<view class="bg-white padding-lr-lg ">
			<el-row>
				<el-col :span="4">
					<MySideBar></MySideBar>
					<MyRank></MyRank>
				</el-col>
				<el-col :span="20"  class="padding-left-xl padding-top-lg">
					<view class="padding-tb">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item>考试类别</el-breadcrumb-item>
							<el-breadcrumb-item>题目练习</el-breadcrumb-item>
						</el-breadcrumb>
					</view>
				
					<el-row>
						<el-col :span="1" style="height: 100%; ">
							<view style="height: 100%;  margin-top: 2rem" >
								<el-button type="primary" icon="el-icon-arrow-left" circle @click="goLastQuestion()"></el-button>
							</view>
						</el-col>
						<el-col :span="14" >
							<view class="cu-bar bg-white solid-bottom  text-xl">
								<view class="action">
									<text class="cuIcon-titles text-blue"></text>
									<DictTag :options="choiceCategoryOptions" :value="question.choiceCategory" />
								</view>
								<view class="action ">
									<button class="cu-btn cuIcon margin-right-xl lg" @click="questionFavorite()"
									:class="favoriteStatus ? 'bg-green' : 'bg-gray'">
										<text class="cuIcon-favor"></text>
									</button>
									<button class="cu-btn cuIcon bg-blue lg" @click="openNoteModel()">
										<text class="cuIcon-edit"></text>
									</button>
								</view>
							</view>
							
							<view class="bg-white padding-sm" v-if="question.choiceCategory == 12 || question.choiceCategory == 21">
								<view class="text-xl ">
									<text  class="text-bold">{{pageNum}}、题干：</text>{{question.stem}}
								</view>
							</view>
							<!-- 题目内容 -->
							<view class=" bg-white" v-for="(issue, index) in issues" :key="index">
								<view class="padding-sm">
									<view  v-if="question.choiceCategory == 12 || question.choiceCategory == 21">
										<text class="text-bold text-xl ">
											{{index + 1}}) {{issue.issue}}
										</text>
									</view>
									<view v-else>
										<text class="text-bold text-xl ">
											{{pageNum}}、{{issue.issue}}
										</text>
									</view>
									<!-- 做题选项 -->
									<view v-if="!question.answerFlag">
										<view class="padding-sm" v-for="(option, optionindex) in issue.issueOptions" :key="optionindex" 
										@click="issueOptionChange(issue, optionindex)">
											<view class="flex text-xl">
												<view class="cu-tag round text-xl " :class="option.checked ? 'bg-green' : ''">
													<DictTag :options="choiceAnswerOptions" :value="optionindex + 1" />
												</view>
												<view class="padding-left-sm flex">
													{{option.label}}
												</view>
											</view>
										</view>
									</view>
								</view>
								<!-- 答案选项 -->
								<view v-if="question.answerFlag">
									<view class="padding-sm" v-for="(option, optionindex) in issue.issueOptions" :key="optionindex" >
										<view class="flex text-xl ">
											<view class="cu-tag round text-xl " 
											:class="option.checked ? 'optionclass' + option.status : ''">
												<DictTag :options="choiceAnswerOptions" :value="optionindex + 1" />
											</view>
											<view class="padding-left-sm flex" :class="option.checked ? 'optionclass-text' + option.status : ''">
												{{option.label}}
											</view>
										</view>
									</view>
									<view class="cu-list menu " >
										<view class="cu-item padding-lr-sm" >
											<view class="content">
												<text class="">答案：</text>
												正确答案 
												<text class="text-green padding-left-sm text-bold">{{issue.answer}}</text>,
												你的答案
												<text class=" padding-left-sm text-bold"
													:class="issue.answer == issue.myanswer ? 'text-green' : 'text-red'"
												>{{issue.myanswer}}</text>
											</view>
											<view class="action" @click="gotoFix()">
												<button class="cu-btn round sm bg-grey">题目纠错</button>
											</view>
										</view>
										
										<view class="cu-item explain margin-bottom-xl" >
											<view class="content padding-tb-sm">
												<text class="">解析：</text>
												<u-parse :content="issue.answerExplain"  v-if="issue.answerExplain"></u-parse>
												{{issue.answerExplain? "" : "本题暂无解读"}}
												<button class="cu-btn round sm bg-grey margin-left-lg " v-if="!issue.answerExplain" @click="gotoResolve()">我来添加</button>
											</view>
										</view>
									</view>
								</view>
							</view>
							
							<view class="padding margin-top-lg text-center" style="width: 100%;" v-if="!question.answerFlag">
								  <el-button type="primary" @click="submitAnswer()" >提交答案</el-button>
							</view>
							
							
							<!-- 笔记弹窗 -->
							<u-popup :show="isShowNoteModel" mode="right" @close="closeNoteModel" :closeable="true" >
								<view class="padding margin-top"  style="width: 600rpx;">
									<view class="margin-top">
										<u--textarea v-model="curNote.content" placeholder="留下努力的痕迹,卷王之王~" count ></u--textarea>
										<view class="padding flex flex-direction" >
											<button class="cu-btn bg-blue lg text-bold round " @click="questionNoteSave()">保存笔记</button>
										</view>
									</view>
									<view class="margin-top">
										<view class="action text-xl">
											<text class="cuIcon-titles text-blue"></text>
											笔记列表
										</view>
									</view>
									<view class="margin-top-sm" v-for="(item, index) in noteList" :key="index" @click="questionNoteEdit(item)">
										<view class="bg-gray padding ">
											<view class='cu-tag round bg-blue sm margin-right-sm' v-if="item.editStatus">我的笔记</view>{{item.content}}
											<view class="padding-top cuIcon-people text-grey ">
												<text class="padding-left-xs">{{item.createBy}}</text>
											</view>
											<view class="cuIcon-time text-grey ">
												<text class="padding-left-xs">{{item.createTime}}</text>
											</view>
										</view>
									</view>
									<view v-if="noteList.length == 0" class="padding margin-top-xl">
										<u-empty mode="list" text="暂无笔记内容, 请前往添加哦~">
										</u-empty>
									</view>
								</view>
							</u-popup>
							 
						</el-col>
						<el-col :span="1" style="height: 100%; ">
							<view style="height: 100%;  margin-top: 2rem" >
								<el-button type="primary" icon="el-icon-arrow-right" circle @click="goNextQuestion()"></el-button>
							</view>
						</el-col>
						
						<el-col :span="8">
							<view class="cu-bar bg-white solid-bottom">
								<view class="action">
									<text class="cuIcon-titles text-blue"></text>答题卡
								</view>
								<view class="action">
									<button class="cu-btn round line-gray" @click="renewal()">重置</button>
								</view>
							</view>
							<!-- 题目信息 -->
							<view class="bg-white padding">
								<view class="grid margin-bottom text-center col-6">
									<view class="padding-xs" v-for="(item, index) in questionChapterData"
										:key="index" @click="gotoPractice(index + 1)">
										<el-button round 
										:type="(index + 1) == pageNum ? 'primary': 
											item.status == 0 ? 'danger' : 
												item.status == 1 ? 'success' : ''">{{index+1}}</el-button>
									</view>
								</view>
							</view>
								
						</el-col>
					</el-row>
			
				</el-col>
			</el-row>
		</view>
		<MyFooter></MyFooter>
		
		<QuestionFix ref="questionFixModel"></QuestionFix>
		<QuestionResolve ref="questionResolveModel"></QuestionResolve>
	</view>
</template>

<script>
	import {
		getDictData
	} from "@/api/api.js"
	import {
		qbmsQuestionChapterData,
		qbmsQuestionAnswerRenewal,
		qbmsQuestionInfo,
		questionAnswerCheck,
		qbmsQuestionList,
		qbmsQuestionFavorite,
		qbmsQuestionFavoriteRecord,
		qbmsQuestionNoteContent,
		qbmsQuestionNoteSave,
	} from "@/api/qbms.js"

	export default {
		data() {
			return {
				chapterId: 0, // 章节ID
				subjectName: "", // 学科名称
				chapterName: "", // 章节名称
				questionChapterData: [], // 题目章节数据
				
				pageNum: 1,
				total: 0,
				questionId: 0, // 题目ID
				choiceCategoryOptions: [], // 题目类型
				choiceAnswerOptions: [], // 答案选项
				question: {}, // 题目信息
				issues: [], // 问题
				favoriteStatus: false, // 题目收藏状态
				isShowNoteModel: false, // 是否显示笔记
				curNote: { // 当前笔记
					content: "",
				},
				noteList: [], // 笔记列表
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.subjectName
			})
			this.chapterId = options.chapterId;
			this.subjectName = options.subjectName;
			this.chapterName = options.chapterName;
		},
		onShow() {
			this.initDict();
			this.initData();
		},
		methods: {
			/** 初始化数据 */
			initData() {
				// 获取题目章节数据
				this.getQusetionChapterData();
				this.getQuestionList();
			},
			/** 关闭笔记弹窗 */
			closeNoteModel() {
				this.isShowNoteModel = false;
			},
			/** 打开笔记弹窗 */
			openNoteModel() {
				this.clearCurNote();
				this.isShowNoteModel = true;
			},
			/** 获取题目信息 */
			getQuestionList() {
				qbmsQuestionList({
					pageNum: this.pageNum,
					chapterId: this.chapterId
				}).then(res => {
					this.question = res.rows;
					this.issues = res.rows.issues;
					this.total = res.total;
					this.getQuestionFavoriteRecord();
					this.getQuestionContent();
				})
			},
			
			/** 问题选项改变 */
			issueOptionChange(issue, index) {
				// 题目类型
				let choiceCategory = this.question.choiceCategory;
				let issueOptions = issue.issueOptions;
				let checked = !issueOptions[index].checked;
				if (choiceCategory < 20) { // 单选题
					issueOptions.forEach(function(ele, i) {
						ele.checked = false
					})
					issueOptions[index].checked = checked
				} else {
					issueOptions[index].checked = checked;
				}
			},
			
			/** 提交答案 */
			submitAnswer() {
				let issuesAnswer = [];
				let flag = true;
				// 构建提交信息
				this.issues.forEach(function(issue) {
					let optionstr = "";  // 选项字符串
					issue.issueOptions.forEach(function(option, index) {
						if (option.checked) {
							optionstr += (index + 1) + ",";
						}
					})
					if (optionstr == "") {
						flag = false;
					}
					// 去除最后一个逗号
					if (optionstr.length > 1) {
						optionstr = optionstr.substring(0, optionstr.length - 1);
					}
					issuesAnswer.push({
						id: issue.id,
						answer: optionstr
					});
					
				})
				if (flag) {
					questionAnswerCheck({
						questionId: this.question.id,
						issues: issuesAnswer
					}).then(res => {
						this.question = res.data;
						this.issues = res.data.issues;
						// 获取题目章节数据
						this.getQusetionChapterData();
					})
					
				} else {
					uni.showToast({
						title: '请作答后提交',
						icon: "none",
					});
				}
				
			},
			
			
			/** 获取题目章节数据 */
			getQusetionChapterData() {
				qbmsQuestionChapterData({
					chapterId: this.chapterId
				}).then(res => {
					this.questionChapterData = res.data;
				})
			},
			/** 跳转下一题 */
			goNextQuestion() {
				// 判断是否到最后一题
				if (this.total > this.pageNum) {
					this.pageNum = this.pageNum + 1;
					this.getQuestionList();
				} else {
					uni.showToast({
						title: "没有下一题",
						icon: "none"
					})
				}
			},
			
			/** 跳转上一题 */
			goLastQuestion() {
				if (this.pageNum > 1) {
					this.pageNum = this.pageNum - 1;
					this.getQuestionList();
				} else {
					uni.showToast({
						title: "没有上一题",
						icon: "none"
					})
				}
			},
			
			/** 获取题目 */
			gotoPractice(pageNum) {
				this.pageNum = pageNum;
				this.getQuestionList();
			},
			
			/** 获取题目收藏记录 */
			getQuestionFavoriteRecord() {
				qbmsQuestionFavoriteRecord({
					questionId: this.question.id
				}).then(res => {
					this.favoriteStatus = res.data
				})
			},
			
			/** 收藏题目 */
			questionFavorite() {
				qbmsQuestionFavorite({
					questionId: this.question.id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.favoriteStatus = res.data
				})
			},
			/** 题目笔记编辑 */
			questionNoteEdit(note) {
				if (note.editStatus) {
					this.curNote = note;
				}
			},
			
			/** 题目笔记保存 */
			questionNoteSave() {
				this.curNote.questionId = this.question.id;
				if (this.curNote.content.length <= 5) {
					uni.showToast({
						title: "请输入笔记内容, 内容不少于5个字符",
						icon: "none"
					})
					return;
				}
				this.closeNoteModel();
				this.$util.$confirm(" 切勿上传无用、违规等内容，平台将对相关账户进行锁定封禁").then(res => {
					this.confirmSubmitNote();
				}).catch(err => {
					this.openNoteModel();
				})
				
			},
			
			/** 确认提交笔记 */
			confirmSubmitNote() {
				qbmsQuestionNoteSave(this.curNote).then(res => {
					uni.showToast({
						title: "保存成功",
						icon: "none"
					})
					this.openNoteModel();
					this.clearCurNote();
					this.getQuestionContent();
				})
			},
			
			clearCurNote() {
				this.curNote = {
					content: "",
				}
			},
			/** 获取题目笔记内容 */
			getQuestionContent() {
				qbmsQuestionNoteContent({
					questionId : this.question.id
				}).then(res => {
					this.noteList = res.data;
				})
			},
			
			/** 初始化字典 */
			initDict() {
				// 获取题库类型字典
				getDictData({
					dictType: "qbms_choice_category"
				}).then(res => {
					this.choiceCategoryOptions = res.data;
				})
				// 选择题答案选项
				getDictData({
					dictType: "qbms_choice_answer_options"
				}).then(res => {
					this.choiceAnswerOptions = res.data;
				})
			},
			
			/** 跳转题目清单 */
			gotoQuestionList() {
				uni.$u.route({
					url: "/pages/qbms/chapterQuestion",
					params: {
						chapterId: this.chapterId,
						chapterName: this.chapterName,
						subjectName: this.subjectName,
					}
				})
			},
			
			/** 跳转题目纠错界面 */
			gotoFix() {
				this.$refs.questionFixModel.show(this.question.id);
			},
			
			/** 跳转题目解析界面 */
			gotoResolve() {
				this.$refs.questionResolveModel.show(this.question.id);
			},
			
			/** 重置练习 */
			renewal() {
				this.$util.$confirm("重做将会清空当前展示题目的答题记录，并同步更新您的错题本。是否确定要重做吗？").then(res => {
					this.confirmRenewal();
				})
			},
			/** 确认重置 */
			confirmRenewal() {
				qbmsQuestionAnswerRenewal({
					chapterId: this.chapterId
				}).then(res => {
					this.getQusetionChapterData();
					this.getQuestionList();
					uni.showToast({
						title: "重置成功",
						icon: "none"
					})
					
				})
			}
			

		}
	}
</script>

<style scoped lang="scss">

.app-container {
	min-height: 95vh;
}
.optionclass1 {
	background-color: #39b54a !important;
	color: #ffffff;
}
.optionclass-text1 {
	color: #39b54a;
}
.optionclass2 {
	background-color: #39b54a !important;
	color: #ffffff;
}
.optionclass-text2 {
	color: #39b54a;
}
.optionclass3 {
	background-color: #e54d42 !important;
	color: #ffffff;
}
.optionclass-text3 {
	color: #e54d42;
}
.explain {

	background-color: #f4f4f5 !important;
}

.left-arrow {
	background-color: #39b54a;
}
.left-arrow:hover{
	background-color: #e54d42;
}

</style>
